<template>
	<view class="zone">
		<Header title="钱袋子"></Header>
		<image class="guize2" src="http://image.qxgm.site/tdz/img/tk/tg5.png" mode="widthFix" @click="apply = true">
		</image>
		<view class="main">
			<view class="book">
				<image src="http://image.qxgm.site/tdz/img/tk/tg1.png" mode="widthFix"></image>
				<image src="http://image.qxgm.site/tdz/img/tk/tg3.png" class="imgs" mode="widthFix"></image>
				<block v-for="(item,index1) in index" :key="index1">
					<image src="http://image.qxgm.site/tdz/img/tk/tg2.png" mode="widthFix"
						:class="['lingqu','bg' + index1]" @click="shouqu(index1)" v-if="item == 1"></image>
				</block>

			</view>
			<view class="sbox">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="box">
					<view class="item">
						<view class="msgbox">
							<view class="title" @click="tribute">今日贡献</view>
							<view class="msg">
								<view class="le">
									<view class="p1">贡献值</view>
									<view class="p2">{{data.today_contribute}}</view>
								</view>
								<view class="btn" @click="todaybtn">查看</view>
							</view>
						</view>
						<view class="msgbox">
							<view class="title">累计贡献</view>
							<view class="msg">
								<view class="le">
									<view class="p1">贡献值</view>
									<view class="p2">{{data.all_contribute}}</view>
								</view>
								<view class="btn" @click="lieji">查看</view>
							</view>
						</view>
					</view>
					<view class="item" style="display: block;">
						<view class="title">
							好友贡献
						</view>
						<view class="inputbox">
							<input type="number" placeholder="请输入好友ID" class="input" maxlength="6" v-model="user_id" />
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="getLevel" @click="searchfun">搜索</u-button>
						</view>
					</view>
					<view class="item" style="display: block;">
						<view class="title">
							我的邀请人
						</view>
						<view class="item1">
							<view class="flex">
								<view class="header">
									<image :src="inviter.avatar" mode="widthFix" />
								</view>
								<view class="worf">
									<view class="phone">{{inviter.username}}</view>
									<view class="vode">ID:{{inviter.invite_code}}</view>
								</view>
							</view>
							<view class="center" @click="contact = true">
								联系ta
							</view>
						</view>
					</view>
					<view class="imgbj">
						<image src="http://image.qxgm.site/tdz/img/tk/tg6.png" mode="widthFix" class="img"></image>
						<view class="liji" @click="$p.navto('/pages/index/invite')">立即邀请</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 玩法说明 -->
		<u-mask :show="apply">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>玩法说明</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<scroll-view scroll-y="true" class="gundong">

							<view class="helpbox">
								<view class="box">
									<view class="title">钱袋子:</view>
									<view class="p1">1.好友每贡献<text>20点贡献值</text>可以装满一个钱袋子。</view>
									<view class="p1">2.每个钱袋子可以领取<text>20零钱</text>。</view>
									<view class="p1">3.每人最多拥有5个钱袋子，不领取溢出部分不计。</view>
								</view>
								<image src="http://image.qxgm.site/tdz/img/ceo/mg-02.png" mode="widthFix"
									class="widthFix"></image>
								<view class="box">
									<view class="title">视频贡献值:</view>
									<view class="p1">1.好友游戏达到85级，奖励<text>0.1</text>贡献值。</view>
									<view class="p1 p2">好友游戏达到120级，奖励<text>0.2</text>贡献值。</view>
									<view class="p1 p2">好友游戏达到200级，奖励<text>0.3</text>贡献值。</view>
									<view class="p1">2.直邀好友观看视频，奖励<text>0.02</text>贡献值。</view>
									<view class="p1">3.间邀好友观看视频，奖励<text>0.01</text>贡献值。</view>
								</view>
								<image src="http://image.qxgm.site/tdz/img/ceo/mg-02.png" mode="widthFix"
									class="widthFix"></image>
								<view class="box">
									<view class="title">境界贡献值:</view>
									<view class="p1">1.好友境界达到元婴期 奖励<text>0.5</text>贡献值。</view>
									<view class="p1">2.好友境界达到炼虚期 奖励<text>1</text>贡献值 。</view>
									<view class="p1">3.好友境界达到大乘期 奖励<text>20</text>贡献值。</view>
									<view class="p1">4.好友境界达到金仙期 奖励<text>50</text>贡献值 。</view>
									<view class="p1">5.好友境界达到道祖期 奖励<text>100</text>贡献值。</view>
								</view>
							</view>

						</scroll-view>

					</view>
				</view>
				<image class="m_close" @click="apply = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 搜索 -->
		<u-mask :show="search">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>搜索</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="searchbox">
							<view class="itembox">
								<view class="flex">
									<view class="header">
										<image :src="invite_user.avatar"
											mode="widthFix" />
									</view>
									<view class="worf">
										<view class="phone">{{invite_user.username}}</view>
										<view class="vode">ID:{{invite_user.invite_code}}</view>
										<view class="linkbtn">好友:{{invite_user.pid == num ? '直推' : '间推'}}</view>
									</view>
								</view>
								<view class="center">
									<view class="zhan">
										总贡献{{invite_user.number}}
									</view>
								</view>
							</view>
							<scroll-view scroll-y class="scrolllist">
								<view class="list" v-for="(item,index) in user" :key="index">
									<view class="le">+{{item.number}}</view>
									<view class="ri">{{item.date}}</view>
								</view>
                                
                                <view class="empty" v-if="user.length==0">
                                	<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
                                	暂无数据
                                </view>
							</scroll-view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="search = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 联系ta -->
		<u-mask :show="contact">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系ta</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="weixin" />
									<view class="scopy" @click="$p.copy(weixin)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="qq" />
									<view class="scopy" @click="$p.copy(qq)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="qq_group" />
									<view class="scopy" @click="$p.copy(qq_group)">
										复制
									</view>
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel1" @click="contact=false">确认</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apply: false,
				search: false,
				contact: false,
				user_id: '',
				data: {},
				inviter: {},
				user: {},
				weixin: '',
				qq: '',
				qq_group: '',
				number: '',
				num: '',
                invite_user:{},
				index: ['', '', '', '', ''],
                num:uni.getStorageSync('userinfo').id,
			}
		},
		onLoad() {
			this.tgindex()
            console.log(this.num)
		},
		methods: {
			async tgindex() {
				let res = await this.$http.index.tgindex()
				if (res.code == 1) {
					this.data = res.data
					this.inviter = res.data.inviter
					this.weixin = this.inviter.wechat_num == null ? '暂无' : this.inviter.wechat_num
					this.qq = this.inviter.qq_num == null ? '暂无' : this.inviter.qq_num
					this.qq_group = this.inviter.qq_group_num == null ? '暂无' : this.inviter.qq_group_num
					this.number = res.data.number

					if (this.number > 20) {
						var t = Math.floor(this.number / 20)
						for (let i = 0; i < t; i++) {
							this.index[i] = 1
						}
						this.num = this.number % 20
					} else {
						this.index = 0
						this.num = this.number
					}
				}
			},
			//收钱袋子
			async shouqu(index1) {
				let res = await this.$http.index.moneyreceive()
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.$set(this.index, index1, '')
				}
			},
			//累计贡献
			lieji() {
				uni.navigateTo({
					url: '/pages/index/buil'
				});
			},
			//今日贡献
			todaybtn() {
				uni.navigateTo({
					url: '/pages/index/buildup'
				});
			},
			async searchfun() {
				if (!this.user_id) {
					this.$u.toast('请输入用户ID')
					return
				}

				let res = await this.$http.index.usercontribute({
					user_id: this.user_id
				})

				if (res.code == 1) {
					this.user = res.data.data
                    this.invite_user = res.data.invite_user
                    if(this.invite_user.username == null){
                        this.$u.toast('未查到该好友有贡献或不是您好友')
                    }else{
                        this.search = true
                    }
                    
					
				} else {
					this.$u.toast(res.msg)
				}

			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.guize2 {
		position: absolute;
		top: 10px;
		right: 20px;
		width: 60px;
		z-index: 9999;
		width: 13%;
	}

	.sbox {
		width: 100%;
		position: relative;

		.yun {
			position: absolute;
			top: -1%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}

		.box {
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			padding: 0px 10px 10px;
			box-sizing: border-box;
			margin-top: 25px;
		}
	}

	.item {
		background: #dbdad8;
		border-radius: 5px;
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;

		.title {
			font-size: 16px;
		}

		.msgbox {
			width: 48%;
		}

		.msg {
			background: url(http://image.qxgm.site/tdz/img/tk/tg4.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 13px 10px;
			box-sizing: border-box;
			margin-top: 10px;

			.p1 {
				color: #333333;
				font-size: 13px;
			}

			.p2 {
				color: #C3160E;
				font-size: 20px;
				margin-top: 2px;
			}

			.btn {
				width: 60px;
				text-align: center;
				font-size: 14px;
				font-weight: normal;
				height: 33px;
				color: #fdf4c6;
				text-shadow: 0 1px 1px #CB6500;
				line-height: 33px;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}
		}

		.inputbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;

			.input {
				background: #BCB8BA;
				border-radius: 1px;
				border: 1px solid rgba(51, 51, 51, 0.95);
				text-align: center;
				height: 40px;
				list-style: 40px;
				width: 75%;

			}

			.getLevel {
				width: 60px;
				text-align: center;
				font-size: 14px;
				font-weight: normal;
				height: 33px;
				color: #fdf4c6;
				text-shadow: 0 1px 1px #CB6500;
				line-height: 33px;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.item1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 9px 5px;
		box-sizing: border-box;
		margin: 3px;

		.header {
			width: 45px;
			margin-left: 6px;
			margin-right: 6px;

			image {
				width: 100%;
				border-radius: 50%;
			}
		}

		.worf {
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 13px;

			.linkbtn {
				width: 75px;
				height: 20px;
				background: linear-gradient(0deg, #5E2352, #60344B);
				border-radius: 10px;
				opacity: 0.39;
				color: #FFF4D5;
				font-size: 12px;
				line-height: 21px;
				text-align: center;
			}
		}

		.flex {
			width: 50%;
			display: flex;
			align-content: center;

			.lv {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 33px;
				}

				text {
					display: inline-block;
					width: 33px;
					font-size: 15px;
					font-weight: 500;
					text-align: center;
				}

			}
		}

		.center {
			width: 60px;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			height: 33px;
			color: #fdf4c6;
			text-shadow: 0 1px 1px #CB6500;
			line-height: 33px;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 20px;
		}
	}

	.imgbj {
		position: relative;

		.liji {
			width: 90px;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			height: 33px;
			color: #fdf4c6;
			text-shadow: 0 1px 1px #CB6500;
			line-height: 33px;
			background: url(http://image.qxgm.site/tdz/img/active/8.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 20px;
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		image {
			width: 100%;
		}

	}

	.book {
		position: relative;

		image {
			width: 100%;
		}

		.imgs {
			position: absolute;
			bottom: 4%;
			left: 0;
		}

		.lingqu {
			position: absolute;
			width: 13%;

		}

		.bg0 {
			left: 31%;
			top: 12%;
		}

		.bg1 {
			left: 53%;
			top: 18%;
		}

		.bg2 {
			left: 13%;
			top: 37%;
		}

		.bg3 {
			left: 38%;
			top: 44%;
		}

		.bg4 {
			left: 62%;
			top: 42%;
		}
	}

	.gundong {
		max-height: 70vh;
	}

	.helpbox {
		padding: 0 10%;
		box-sizing: border-box;

		.widthFix {
			width: 100%;
			margin: 5px auto;
		}

		.title {
			font-size: 18px;
			margin-bottom: 15px;
		}

		.p1 {
			font-size: 13px;
			margin-bottom: 5px;

			text {
				color: #ED519F;
			}
		}

		.p2 {
			margin-left: 12px;
		}
	}

	.searchbox {
		padding: 0 20px 0 20px;
		box-sizing: border-box;

		.itembox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			padding: 9px 5px;
			box-sizing: border-box;
			margin: 3px;
		}

		.header {
			width: 45px;
			margin-left: 6px;
			margin-right: 6px;

			image {
				width: 100%;
				border-radius: 50%;
			}
		}

		.worf {
			position: relative;
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 13px;

			.linkbtn {
				width: 75px;
				height: 20px;
				background: linear-gradient(0deg, #5E2352, #60344B);
				border-radius: 10px;
				opacity: 0.39;
				color: #FFF4D5;
				font-size: 12px;
				line-height: 21px;
				text-align: center;
			}
		}

		.flex {
			width: 65%;
			display: flex;
			align-content: center;

			.lv {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 33px;
				}

				text {
					display: inline-block;
					width: 33px;
					font-size: 15px;
					font-weight: 500;
					text-align: center;
				}

			}
		}

		.center {
			width: 35%;
			text-align: center;

			text {
				color: #FF6600;
			}
		}

		.zhan {
			width: 100%;
			font-size: 12px;
			font-weight: normal;
			color: #FF3333;
			line-height: 18px;
			background: rgba(182, 111, 113, 0.3);
			border-radius: 10px;
			margin-top: 5px;
		}

		.scrolllist {
			height: 200px;
			padding: 10px 5px 0;
			box-sizing: border-box;

			.list {
				display: flex;
				justify-content: space-between;
				padding: 15px 20px;
				box-sizing: border-box;
				border-radius: 5px;
				background: #ffffff;
				margin-bottom: 5px;

				.le {
					color: #ED519F;
				}
			}
		}
	}

	.jihuop {
		padding: 0 9%;

		.getLevel {
			display: block;
			margin: 13px auto 0;
			width: 36%;
			font-size: 18px;
			font-weight: normal;
			color: #f9e5b6;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.spart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		text {
			width: 22%;
		}
	}

	.slink {
		width: 78%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		padding: 0 6px 0 19px;
		height: 40px;

		input {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 24px;
		}

		.scopy {
			width: 49px;
			height: 28px;
			display: block;
			font-size: 12px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.getLevel1 {
		width: 36%;
		text-align: center;
		font-size: 14px;
		font-weight: normal;
		height: 33px;
		color: #fdf4c6;
		text-shadow: 0 1px 1px #CB6500;
		line-height: 33px;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}
</style>